﻿<!doctype html>
<html lang="en">
<head>
    <title>LineChart - DateTime</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="%description%" />
    <meta name="keywords" content="" />
    <meta name="author" content="ComponentOne" />
    <link href="../base-reset.css" rel="stylesheet" type="text/css" />
    <link href="../../themes/Aristo/jquery-ui-1.8.4.custom.css" rel="stylesheet" type="text/css" />
    <link href="../demos-single.css" rel="stylesheet" type="text/css" />
    <script src="../../external/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="../../external/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
    <script src="../../external/jquery.glob.min.js" type="text/javascript"></script>
    <script src="../../external/raphael.js" type="text/javascript"></script>
    <script src="../../external/raphael-popup.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijchartcore.js" type="text/javascript"></script>
    <script src="../../wijmo/jquery.ui.wijlinechart.js" type="text/javascript"></script>
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#wijdatelinechart").wijlinechart({
                showChartLabels: false,
                hint: {
                    formatter: function () {
                        return this.y;
                    }
                },
                header: {
                    text: "World of Warcraft Players by Region"
                },
                seriesList: [
                    {
                        label: "North America",
                        legendEntry: true,
                        data: {
                            x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), new Date("3/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
                            y: [1000000, 1000000, 1100000, 1400000, 1700000, 2000000, 2500000]
                        },
                        markers: {
                            visible: true,
                            type: "circle"
                        }
                    },
                    {
                        label: "Europe",
                        legendEntry: true,
                        data: {
                            x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("12/1/2005"), new Date("3/1/2006"), new Date("7/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
                            y: [1000000, 1000000, 900000, 1000000, 1000000, 1000000, 1500000, 2000000]
                        },
                        markers: {
                            visible: true,
                            type: "circle"
                        }
                    },
                    {
                        label: "Asia",
                        legendEntry: true,
                        data: {
                            x: [new Date("7/1/2005"), new Date("8/1/2005"), new Date("10/1/2005"), new Date("3/1/2006"), new Date("9/1/2006"), new Date("12/1/2006"), new Date("1/1/2008")],
                            y: [1500000, 2000000, 2400000, 3700000, 4000000, 4500000, 5500000]
                        },
                        markers: {
                            visible: true,
                            type: "circle"
                        }
                    }
                ],
                seriesStyles: [{
                    stroke: "#afe500", "stroke-width": 5, opacity: 0.8
                }, {
                    stroke: "#959595", "stroke-width": 5, opacity: 0.8
                }, {
                    stroke: "#2d2d2d", "stroke-width": 5, opacity: 0.8
                }],
                seriesHoverStyles: [{
                    "stroke-width": 8, opacity: 1
                }, {
                    "stroke-width": 8, opacity: 1
                }, {
                    "stroke-width": 8, opacity: 1
                }]
            });
        })
    </script>
</head>
<body class="demo-single">
    <div class="container">
        <div class="header">
            <h2>
                DateTime</h2>
        </div>
        <div class="main demo">
            <!-- Begin demo markup -->
            <div id="wijdatelinechart" class="ui-widget ui-widget-content ui-corner-all" style="height: 350px;">
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
        <div class="footer demo-description">
            <p>
            </p>
        </div>
    </div>
</body>
</html>
